<template>
    <div class="tabbar ub max-width">
        <div v-for="(dict,index) in list" class="ub-f1 ub ub-ver tx-c controller ub-pc ub-ac"
             @click="selectTabbar(index)">
            <!--<router-link :to="dict.urlInfo">-->
            <div style="background-repeat: no-repeat;background-size: 100% 100%;width:0.26rem;height:0.26rem;"
                 :style="getStyle(dict)"></div>
            <div :class="dict.flag?'select_title':'normal_title'">{{dict.name}}</div>
            <!--</router-link>-->
        </div>
    </div>
</template>

<script>
    import tool from './../config/mUtil/tool'


    export default {
        name: 'FooterView',
        props: {
            list:{
                type: Array
            }
        },
        data() {
            return {
                showInfo: false,
                urlParam: {}
            }
        },
        update: {},
        mounted() {
            this.$nextTick(() => {
                let name = this.$router.history.current.name;
                let index = this.list.findObjIndex('url', name);
                if (index !== -1) this.showInfo = true;
            });
        },
        methods: {
            selectTabbar(index) {
                this.list.map(x => x.flag = false);
                this.list[index].flag = true;
                let item = this.list[index];
                tool.log(item);
                this.$emit('selectTabbar', item);
            },
            getStyle(item){
                let img = item.flag?item.img_s:item.img_n;
                let style = {
                    backgroundImage:'url('+img+')'
                };
                return style;
            },
        }
    }
</script>

<style type="text/scss" scoped lang="scss">
    @import "./../style/mixin";
    @import "../../static/css/ui-base.css";

    .tabbar {
        position: fixed;
        width: 100%;
        bottom: 0;
        /*-webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);*/
        /*-webkit-filter:blur(10px);*/
        background-color: rgba(233, 234, 238, 0.95);
        box-shadow: inset 0 0.5px 0 0 rgba(44, 45, 58, 0.1);
        height: 0.5rem;
        /*-webkit-filter: blur(10px);
        filter: blur(10px);*/
    }

    .select_title {
        font-family: PingFangSC;
        font-size: 0.1rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.0;
        letter-spacing: 0.1px;
        color: #368ff4;
    }

    .normal_title {
        font-family: PingFangSC;
        font-size: 0.1rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.0;
        letter-spacing: 0.1px;
        color: #686872;
        /*padding-bottom: 0.03rem;*/
    }
</style>
